<template>
<el-container style="width: 100%; height: 100%;">
 <!-- 左侧的盒子 -->
  <el-aside style=" overflow-y: hidden; overflow-x: hidden; width: 200px; background-color:#324057;" >
    <el-col :span="12" style="width: 100%; height: 100%;">
    <el-menu :default-active= "defaultActive"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#324057"
      text-color="#fff"
      active-text-color="#ffd04b"
      router="true">

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>个人信息管理</span>
        </template>
        <el-menu-item-group>
           <el-menu-item  index="Personal">个人信息显示
               </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>车辆信息管理</span>
        </template>
        <el-menu-item-group>

          <el-menu-item index="BasicVR">名下基础车辆信息查阅
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">

        <template slot="title">
          <i class="el-icon-location"></i>
          <span>历史通行信息查阅</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="VVHistory">车辆历史通行记录查看</el-menu-item>
<!--          <el-menu-item index="DVHistory">车辆历史通行记录详情查看</el-menu-item>-->
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">

        <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span class="iconfont" style="float:left">&#xe60a;</span>
          <span>收费记录申诉</span>
        </template>
        <el-menu-item-group>
<!--          <el-menu-item index="FeeA"><span class="iconfont" style="float:left; ">&#xe65d;</span>收费申诉</el-menu-item>-->
          <el-menu-item index="VComplaints"><span class="iconfont" style="float:left">&#xe636;</span>收费异常申诉进度查看</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
<!--      <el-submenu index="5">-->

<!--        <template slot="title">-->
<!--          &lt;!&ndash; <i class="el-icon-location"></i> &ndash;&gt;-->
<!--          <span class="iconfont" style="float:left">&#xe60a;</span>-->
<!--          <span>申诉结果查阅</span>-->
<!--        </template>-->
<!--        <el-menu-item-group>-->
<!--          <el-menu-item index="Review"><span class="iconfont" style="float:left; ">&#xe65d;</span>申诉结果查看</el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--      </el-submenu>-->
      <el-submenu index="6">

        <template slot="title">
          <!-- <i class="el-icon-location"></i> -->
          <span class="iconfont" style="float:left">&#xe60a;</span>
          <span>补缴/退款</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="ManagementFee"><span class="iconfont" style="float:left; ">&#xe65d;</span>补缴/退款</el-menu-item>
          </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
  </el-aside>
  <el-container>
    <!--头部侧的盒子 -->
    <el-header style="text-align: right;">
      <!-- <div class="" >
            欢迎XXX
      </div> -->
      <head-top></head-top>
    </el-header>
    <!-- 中间侧的盒子 -->

<el-main>
  <keep-alive>
      <router-view></router-view>
    </keep-alive>
</el-main>
</el-container>
</el-container>
</template>

<script>
import headTop from './headTop2'
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      components: {
    		headTop,
    	},
        computed: {
			defaultActive: function(){
				return this.$route.path.replace('/', '');
			}
		}
    },
  }
</script>

<style>
@font-face {
    font-family: "iconfont";
    src: url('./font/iconfont.eot');
    src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height:22px;
    color:#ffffff;
    margin-right:10px;
}
  .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 480px;
  }
  .el-menu {
	border-right:0!important;
}
.el-header {
    background-color: #EFF2F7;
    color: #333;
  }
</style>
